<template>
  <view class="contenter">
    <view class="head flex">
      <item-image :type="'1'" :img="user.userimg" :size="146"   :fade="false"/>
      <view class="nei">
        <view class="name">{{user.nickname}}</view>
        <view>{{user.phone || ''}}</view>
<!--        <view class="time">上次服务时间：2021/08/10</view>-->
      </view>
    </view>
    <view class="content">
      <view class="h5 u-flex">用户旗下项目</view>
      <view class="item" v-for="(data,index) in list" :key="index" @click="tabChangeIndex( data,index)" :class="{'active':ids.includes(data.sid)}">
        <view v-if="data.service_id == 1" class="title">染养系列</view>
        <view v-if="data.service_id == 2" class="title">剪烫系列</view>
        <view v-if="data.service_id == 3" class="title">美容系列</view>
        <view class="u-flex flex_bt">
          <view class="flex">
            <item-image  :img="data.image" :width="160" :height="160"  :fade="false"/>
            <view class="flex flex_bt flex-column">
              <view class="name">{{data.sname}}</view>
              <view class="price" v-if="data.num === 0">产品已用完</view>
              <view class="text" v-else>剩余次数：{{data.num}}次</view>
            </view>
          </view>
          <view class="radio  flex flex_j_c" >
            <u-icon name="checkbox-mark"  color="#ffffff" size="21"></u-icon>
          </view>
        </view>

      </view>
    </view>
    <view class="bton" v-if="list.length>0">
      <view class="bt" @click="xiadan">确认选择</view>
    </view>

  </view>
</template>

<script>
export default {
  name: "myUserDetail",
  data(){
    return{
      search:'',
      tabIndex:-1,
      id:'', //客户id
      rid:'', //技师
      list:[],
      user:{},
      ids:[]
    }
  },
  onLoad(option){
    this.id = option.id
    this.rid = option.rid
    // this.sid = option.sid.toString() || ''
    // this.ids.push(Number(option.sid))
    this.user = JSON.parse(option.data)
    this.setData()

  },
  methods:{
    setData(){
      //服务列表
      this.$api.userService({id:this.id}).then(res => {
        this.list = res.data
        // res.data.forEach((data,index)=>{
        //   if(this.sid == data.sid) {
        //     this.tabIndex = index
        //   }
        // })
      })
    },
    //选择信息
    tabChangeIndex(data,index){
      this.tabIndex = index
      if(this.ids.includes(data.sid)) {
        let indexTwo =this.ids.findIndex((item)=>{
          return  data.sid==item
        })
        this.ids.splice(indexTwo,1)
      }else{
        this.ids.push(data.sid)
      }
    },
    // 确认选择商品
    xiadan(){
      if(this.ids.length == 0)return this.$u.toast('请选择服务！')
      this.$u.route({
        url: 'pagesA/placeAnOrder/index',
        params: {
          type: 1,
          uid: this.id,
          rid: this.rid,
          id: this.ids.toString(),
        }
      });
    },

  },
}
</script>

<style scoped lang="scss">
.contenter{
  margin:  0 32rpx;
  .head{
    height: 198rpx;
    background: #FFFFFF;
    border-radius: 12rpx;
    padding: 20rpx 26rpx;
    margin-top: 20rpx;
    .nei{
      margin-left: 20rpx;
      font-size: 24rpx;
      color: #555555;
      .name{
        font-size: 36rpx;
        color: #4B4B4B;
        margin-bottom: 10rpx;
      }
      .time{
        margin-top: 20rpx;
        margin-bottom: 10rpx;
      }
    }
  }
  .content{
    margin-top: 20rpx;
    background: white;
    border-radius: 12rpx;
    .item{
      padding: 20rpx;
      .title{
        padding-left: 10rpx;
        padding-bottom: 20rpx;
        color: #000000;
        font-size: 28rpx;
        font-weight: bold;
      }
    }
    .h5{
      height: 88rpx;
      padding: 0 20rpx;
      font-size: 32rpx;
      font-weight: bold;
      color: #0F4C3A;
    }
    .flex_bt{
      margin-left: 20rpx;
    }
    .name{
      font-size: 32rpx;
      font-weight: bold;
      color: #3B3B3B;
    }
    .text{
      font-size: 28rpx;
      color: #959595;
    }
    .price{
      color: #E86823;
    }

  }
  .bton{
    margin-top: 60rpx;
    .bts{
      width: 590rpx;
      height: 78rpx;
      background:white;
      border-radius: 40rpx;
      text-align: center;
      line-height: 78rpx;
      font-size: 28rpx;
      color: #45806E;
      border: 2rpx solid #45806E;
      margin-top: 40rpx;
    }
  }
  .radio{
    width: 40rpx;
    height: 40rpx;
    border: 2rpx solid #E0DCDF;
    border-radius: 50%;
    margin-right: 30rpx;
  }
  .active{
    .radio{
      background: $uni-color-primary;
      border: 2rpx solid $uni-color-primary;
    }
  }
}
</style>